<template>
	<div style="padding: 10vh 10rpx;">
		<div style="border: 1px solid #e2e2e2; margin: 5rpx; box-shadow: 0 0 30rpx #d4d4d4; padding: 40rpx;">
			<div style="margin-bottom: 20rpx">手机号</div>
			<input type="text" v-model="loginParams.username" placeholder="请输入手机号" style="border: 1px solid #cecece; text-align: left;"
				maxlength="11" />
			<div style="display:flex; margin-top:3rpx; line-height:60rpx;">
				<input type="text" v-model="loginParams.code"
					style="margin-right:10rpx; border: 1px solid #cecece; text-align: left;" placeholder="请输入手机验证码" maxlength="6" />
				<span v-if="remainSeconds > 0" style=" color:gray">
					发送验证码{{remainSeconds}}秒
				</span>
				<span v-else @tap="sendPhoneCode()">
					发送验证码
				</span>
			</div>
			<div class="btn" @tap="loginTestUser()">手机号登录</div>
			<div class="btn" @tap="weixinMpLogin()" style="display:flex; justify-content:center;">
				<image src="../static/weixin-login.png" style="width:50rpx;height:60rpx;" 
					mode=""></image>
				微信授权登录
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import * as userApi from '@/api/userApi.js';
	export default {
		data() {
			return {
				loginParams: {
					username: '',
					code: '',
				},
				remainSeconds: 0,
			};
		},
		mounted() {
			this.handlerLocalToken()
		},
		methods: {
			...mapMutations(['setUserInfo']),
			handlerLocalToken() {
				let token = uni.getStorageSync("token")
				if (token) {
					userApi.getUserInfo({
						success: res => {
							this.setUserInfo(res.data)
							this.goBackPage()
						}
					})
				}
			},
			sendPhoneCode() {
				this.$msg("发送成功")
				// 发送验证码，模拟
				this.remainSeconds = 60
				this.timer = setInterval(() => {
					this.remainSeconds -= 1;
					if (this.remainSeconds <= 0)
						clearInterval(this.timer)
				}, 1000)
			},
			goBackPage() {
				let pages = getCurrentPages(); // 当前页面
				if (pages == null || pages.length <= 1) {
					// 如果第一次打开的是登录页或者是测试页面就重载到主页
					uni.reLaunch({
						url: '/pages/userCenter/index'
					});
				} else {
					// 返回上一个页面
					uni.navigateBack({
						delta: 1
					});
				}
			},
			// 微信小程序直接授权登录
			weixinMpLogin() {
				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					success: wxRes => {
						// eg: {code: "073BdF1w3us1mV2SRk1w3MDxpH3BdF1z", errMsg: "login:ok"}
						console.log('微信登录成功 获取到的code=', wxRes.code);
						userApi.loginByWeixin({
							code: wxRes.code,
							success: res => {
								uni.setStorageSync('token', res.data);
								this.handlerLocalToken();
							}
						});
					}
				});
				// #endif
			},
			// 测试号登录
			loginTestUser() {
				userApi.loginTestUser({
					username: this.loginParams.username,
					code: this.loginParams.code,
					success: res => {
						uni.setStorageSync('token', res.data);
						this.handlerLocalToken();
					}
				});
			},
		}
	};
</script>

<style>
	input {
		height: 60rpx;
		line-height: 60rpx;
	}

	.btn {
		border: 1px solid gray;
		text-align: center;
		margin: 10rpx 0;
		height: 60rpx;
		line-height: 60rpx;
	}

	/* 微信授权二维码弹窗 */
	.dialog {
		position: absolute;
		top: 20vh;
		left: 0;
		width: calc(100% - 60rpx);
		z-index: 100;
		background-color: white;
		padding: 30rpx;
		line-height: 60rpx;
		color: #5a5a5a;
		text-align: center;
	}

	/* 弹窗遮罩 */
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 90;
		background-color: black;
		opacity: 0.4;
	}
</style>
